import { Input, List } from "antd"
import { useState,useTransition } from "react"

interface Item {
  id: number
  name: string,
  address: string
}

export default function Transition() {

  const [val, setVal] = useState('')

  const [list, setList] = useState<Item[]>([])

  const [isPending, startTransition] = useTransition()

  const handleChnage = (e: React.ChangeEvent<HTMLInputElement>) => {
    setVal(e.target.value)
    fetch('/api/list?keyWord=' + e.target.value).then(res=> res.json()).then(res => {
      // setList(res.list)
      startTransition(() => {
        setList(res.list)
      })
    })
  }

  return (
    <>
      <h1>useTransition</h1>
      <Input value={val} onChange={handleChnage} />
      {isPending && <div>loading...</div>}
      <List renderItem={item => <List.Item>
        <List.Item.Meta title={item.name} description={item.address} />
      </List.Item>} dataSource={list}>

      </List>
    </>
  )
}